/**
 * 颜色选择器插件 - 主要JavaScript文件
 * 功能：RGB和CMYK色值输入、验证、转换和颜色预览
 */

// DOM元素引用
const rgbInput = document.getElementById('rgb-input');
const cmykInput = document.getElementById('cmyk-input');
const hexInput = document.getElementById('hex-input');
const rgbBtn = document.getElementById('rgb-btn');
const cmykBtn = document.getElementById('cmyk-btn');
const hexBtn = document.getElementById('hex-btn');
const colorBlock = document.getElementById('color-block');
const errorDiv = document.getElementById('error-message');
const clearBtn = document.getElementById('clear-btn');

/**
 * 颜色转换工具类
 */
class ColorConverter {
    /**
     * 解析RGB色值字符串
     * @param {string} rgbStr - RGB色值字符串 (仅支持 r,g,b 格式)
     * @returns {Object|null} - 返回 {r, g, b} 对象或 null
     */
    static parseRGB(rgbStr) {
        rgbStr = rgbStr.trim();
        
        // 处理简化格式 r, g, b
        const simpleMatch = rgbStr.match(/^\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*$/);
        if (simpleMatch) {
            const r = parseInt(simpleMatch[1]);
            const g = parseInt(simpleMatch[2]);
            const b = parseInt(simpleMatch[3]);
            
            // 验证RGB值范围
            if (r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255) {
                return { r, g, b };
            }
        }
        
        return null;
    }
    
    /**
     * 解析CMYK色值字符串
     * @param {string} cmykStr - CMYK色值字符串 (支持 c,m,y,k 和 cmyk(c%, m%, y%, k%) 格式)
     * @returns {Object|null} - 返回 {c, m, y, k} 对象或 null
     */
    static parseCMYK(cmykStr) {
        cmykStr = cmykStr.trim();
        
        // 处理简化格式 c, m, y, k
        const simpleMatch = cmykStr.match(/^\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*$/);
        if (simpleMatch) {
            const c = parseFloat(simpleMatch[1]);
            const m = parseFloat(simpleMatch[2]);
            const y = parseFloat(simpleMatch[3]);
            const k = parseFloat(simpleMatch[4]);
            
            // 验证CMYK值范围
            if (c >= 0 && c <= 100 && m >= 0 && m <= 100 && 
                y >= 0 && y <= 100 && k >= 0 && k <= 100) {
                return { c, m, y, k };
            }
        }
        
        // 匹配cmyk(c%, m%, y%, k%)格式
        const cmykMatch = cmykStr.match(/cmyk\s*\(\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*,\s*(\d+(?:\.\d+)?)%\s*\)/);
        if (cmykMatch) {
            const c = parseFloat(cmykMatch[1]);
            const m = parseFloat(cmykMatch[2]);
            const y = parseFloat(cmykMatch[3]);
            const k = parseFloat(cmykMatch[4]);
            
            // 验证CMYK值范围
            if (c >= 0 && c <= 100 && m >= 0 && m <= 100 && 
                y >= 0 && y <= 100 && k >= 0 && k <= 100) {
                return { c, m, y, k };
            }
        }
        
        return null;
    }
    
    /**
     * RGB转CMYK
     * @param {number} r - 红色值 (0-255)
     * @param {number} g - 绿色值 (0-255)
     * @param {number} b - 蓝色值 (0-255)
     * @returns {Object} - 返回 {c, m, y, k} 对象
     */
    static rgbToCmyk(r, g, b) {
        // 将RGB值转换为0-1范围
        const rNorm = r / 255;
        const gNorm = g / 255;
        const bNorm = b / 255;
        
        // 计算K值（黑色）
        const k = 1 - Math.max(rNorm, gNorm, bNorm);
        
        // 如果K=1（纯黑色），CMY都为0
        if (k === 1) {
            return { c: 0, m: 0, y: 0, k: 100 };
        }
        
        // 计算CMY值
        const c = (1 - rNorm - k) / (1 - k);
        const m = (1 - gNorm - k) / (1 - k);
        const y = (1 - bNorm - k) / (1 - k);
        
        return {
            c: Math.round(c * 100),
            m: Math.round(m * 100),
            y: Math.round(y * 100),
            k: Math.round(k * 100)
        };
    }
    
    /**
     * CMYK转RGB
     * @param {number} c - 青色值 (0-100)
     * @param {number} m - 洋红值 (0-100)
     * @param {number} y - 黄色值 (0-100)
     * @param {number} k - 黑色值 (0-100)
     * @returns {Object} - 返回 {r, g, b} 对象
     */
    static cmykToRgb(c, m, y, k) {
        // 将百分比转换为0-1范围
        const cNorm = c / 100;
        const mNorm = m / 100;
        const yNorm = y / 100;
        const kNorm = k / 100;
        
        // 计算RGB值
        const r = 255 * (1 - cNorm) * (1 - kNorm);
        const g = 255 * (1 - mNorm) * (1 - kNorm);
        const b = 255 * (1 - yNorm) * (1 - kNorm);
        
        return {
            r: Math.round(r),
            g: Math.round(g),
            b: Math.round(b)
        };
    }
    
    /**
     * 解析HEX色值字符串
     * @param {string} hexStr - HEX色值字符串 (格式: #RRGGBB 或 #RGB)
     * @returns {Object|null} - 返回 {r, g, b} 对象或 null
     */
    static parseHEX(hexStr) {
        hexStr = hexStr.trim();
        
        // 必须以#开头
        if (!hexStr.startsWith('#')) {
            return null;
        }
        
        const hex = hexStr.slice(1);
        
        // 处理#RGB格式（3位）
        if (hex.length === 3 && /^[0-9A-Fa-f]{3}$/.test(hex)) {
            return {
                r: parseInt(hex[0] + hex[0], 16),
                g: parseInt(hex[1] + hex[1], 16),
                b: parseInt(hex[2] + hex[2], 16)
            };
        }
        
        // 处理#RRGGBB格式（6位）
        if (hex.length === 6 && /^[0-9A-Fa-f]{6}$/.test(hex)) {
            return {
                r: parseInt(hex.slice(0, 2), 16),
                g: parseInt(hex.slice(2, 4), 16),
                b: parseInt(hex.slice(4, 6), 16)
            };
        }
        
        return null;
    }
    
    /**
     * RGB转十六进制
     * @param {number} r - 红色值 (0-255)
     * @param {number} g - 绿色值 (0-255)
     * @param {number} b - 蓝色值 (0-255)
     * @returns {string} - 十六进制颜色值
     */
    static rgbToHex(r, g, b) {
        const toHex = (n) => {
            const hex = n.toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        };
        return `#${toHex(r)}${toHex(g)}${toHex(b)}`.toUpperCase();
    }
}

/**
 * 显示错误信息
 * @param {string} message - 错误信息
 */
function showError(message) {
    errorDiv.textContent = message;
    errorDiv.classList.remove('hidden');
    setTimeout(() => {
        errorDiv.classList.add('hidden');
    }, 3000);
}

/**
 * 隐藏错误信息
 */
function hideError() {
    errorDiv.classList.add('hidden');
}



/**
 * 处理RGB输入
 */
function handleRGBInput() {
    const rgbValue = rgbInput.value.trim();
    
    if (!rgbValue) {
        showError('请输入RGB色值');
        return;
    }
    
    const rgb = ColorConverter.parseRGB(rgbValue);
    if (!rgb) {
        showError('无效的RGB格式。请使用 255, 0, 0 格式');
        return;
    }
    
    // 转换为CMYK并更新显示
    const cmyk = ColorConverter.rgbToCmyk(rgb.r, rgb.g, rgb.b);
    
    // 更新颜色块背景
    colorBlock.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
    colorBlock.classList.add('color-updated');
    
    // 移除动画类
    setTimeout(() => {
        colorBlock.classList.remove('color-updated');
    }, 300);
    
    hideError();
    
    // 自动填充CMYK和HEX输入框
    cmykInput.value = `${cmyk.c}, ${cmyk.m}, ${cmyk.y}, ${cmyk.k}`;
    hexInput.value = ColorConverter.rgbToHex(rgb.r, rgb.g, rgb.b);
}

/**
 * 处理CMYK输入
 */
function handleCMYKInput() {
    const cmykValue = cmykInput.value.trim();
    
    if (!cmykValue) {
        showError('请输入CMYK色值');
        return;
    }
    
    const cmyk = ColorConverter.parseCMYK(cmykValue);
    if (!cmyk) {
        showError('无效的CMYK格式。请使用 0, 100, 100, 0 格式');
        return;
    }
    
    // 转换为RGB并更新显示
    const rgb = ColorConverter.cmykToRgb(cmyk.c, cmyk.m, cmyk.y, cmyk.k);
    
    // 更新颜色块背景
    colorBlock.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
    colorBlock.classList.add('color-updated');
    
    // 移除动画类
    setTimeout(() => {
        colorBlock.classList.remove('color-updated');
    }, 300);
    
    hideError();
    
    // 自动填充RGB和HEX输入框
    rgbInput.value = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
    hexInput.value = ColorConverter.rgbToHex(rgb.r, rgb.g, rgb.b);
}

/**
 * 处理HEX输入
 */
function handleHEXInput() {
    const hexValue = hexInput.value.trim();
    
    if (!hexValue) {
        showError('请输入HEX色值');
        return;
    }
    
    const rgb = ColorConverter.parseHEX(hexValue);
    if (!rgb) {
        showError('无效的HEX格式。请使用 #FF0000 或 #F00 格式');
        return;
    }
    
    // 转换为CMYK并更新显示
    const cmyk = ColorConverter.rgbToCmyk(rgb.r, rgb.g, rgb.b);
    
    // 更新颜色块背景
    colorBlock.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
    colorBlock.classList.add('color-updated');
    
    // 移除动画类
    setTimeout(() => {
        colorBlock.classList.remove('color-updated');
    }, 300);
    
    hideError();
    
    // 自动填充RGB和CMYK输入框
    rgbInput.value = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
    cmykInput.value = `${cmyk.c}, ${cmyk.m}, ${cmyk.y}, ${cmyk.k}`;
}

/**
 * 清除所有输入和显示
 */
function clearAll() {
    rgbInput.value = '';
    cmykInput.value = '';
    hexInput.value = '';
    colorBlock.style.backgroundColor = '';
    hideError();
}

// 事件监听器
rgbBtn.addEventListener('click', handleRGBInput);
cmykBtn.addEventListener('click', handleCMYKInput);
hexBtn.addEventListener('click', handleHEXInput);
clearBtn.addEventListener('click', clearAll);

// 回车键支持
rgbInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        handleRGBInput();
    }
});

cmykInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        handleCMYKInput();
    }
});

hexInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        handleHEXInput();
    }
});

// 页面加载完成后的初始化
document.addEventListener('DOMContentLoaded', () => {
    console.log('Color Picker插件已加载');
    hideError();
});